<template>
	<view class="content">
		<view class="title">
			设置新的手机号
		</view>
		<view class="value">
			为了方便进行提现，请输入您的常用手机号
		</view>
		<form @submit="formSubmit">
			<view class="content-item">
				<view class="content-item__input">
					<input
						type="number"
						maxlength="11"
						placeholder="请输入新手机号"
						v-model="form.phone"
						name="phone"
					/>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item__input">
					<input
						type="number"
						maxlength="4"
						placeholder="请输入新手机号验证码"
						v-model="form.code"
						name="code"
					/>
				</view>
				<view class="getCode" v-if="isYzm2" @tap="getNewCode">获取验证码</view>
				<view class="getCode" v-else>{{ yzmNum2 }}s</view>
			</view>
			<button form-type="submit" class="content-submit">确认</button>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			codePhone: '',
			aliInfo: {},
			form: {
				phone: '',
				code: ''
			},
			isYzm2: true,
			yzmNum2: 60
		};
	},
	onLoad(options) {
		this.form.oldPhone = options.phone;
		this.getInfo();
	},

	methods: {
		getInfo() {
			this.$service.member.aliAccount
				.info()
				.then(res => {
					this.aliInfo = res;
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		getOldCode() {
			this.$service.common.common
				.getCode({
					phone: this.form.oldPhone
				})
				.then(res => {
					uni.showToast({
						title: '发送成功'
					});
					this.successCode();
				})
				.catch(err => {
					if (err.message.includes('触发')) {
						uni.showToast({
							title: '请求太多，请稍后再试',
							icon: 'none'
						});
						return false;
					}
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		getNewCode() {
			let phone = this.form.phone;
			if (phone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
				return false;
			}
			if (!/^1[3456789]\d{9}$/.test(phone)) {
				uni.showToast({
					title: '手机号格式不对',
					icon: 'none'
				});
				return false;
			}
			this.$service.common.common
				.getCode({
					phone: phone
				})
				.then(res => {
					uni.showToast({
						title: '发送成功'
					});
					this.successCode();
				})
				.catch(err => {
					if (err.message.includes('触发')) {
						uni.showToast({
							title: '请求太多，请稍后再试',
							icon: 'none'
						});
						return false;
					}
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		successCode() {
			this.isYzm2 = false;
			let yzmNum2 = this.yzmNum2;
			let setTimer = setInterval(() => {
				this.yzmNum2 = yzmNum2--;
				if (yzmNum2 <= 0) {
					clearInterval(setTimer);
					this.isYzm2 = true;
					this.yzmNum2 = 60;
				}
			}, 1000);
		},
		formSubmit(e) {
			console.log(e.detail.value);
			if (!e.detail.value.phone || !e.detail.value.code) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return false;
			}
			this.$service.member.aliAccount
				.update({
					newPhoneCode: e.detail.value.code,
					newPhone: e.detail.value.phone
				})
				.then(res => {
					console.log(res);
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.back(2);
					}, 1000);
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	height: 100vh;
	background: #ffffff;
	.title {
		font-size: 44rpx;
		color: #221d2c;
		margin-left: 50rpx;
		padding-top: 30rpx;
	}
	.value {
		font-size: 28rpx;
		color: #86828c;
		margin-left: 50rpx;
		padding: 10rpx 0;
		margin-bottom: 40rpx;
	}
	.content-item {
		width: 698rpx;
		height: 100rpx;
		margin: auto;
		border-radius: 16rpx;
		background: #ffffff;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		.content-item__input {
			color: #221d2c;
			flex: 1;
			margin: 0 28rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid #c1c1c3;
		}
		.getCode {
			color: #0160f7;
			margin: 0 24rpx;
		}
	}
	.content-submit {
		width: 336rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 56rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background: #f70114;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
